<template>
    <div>
        <div class="chat-wrapper">
            <!-- 聊天内容 -->
            <vue-tribute :options="tributeOption">
                <div id="chat-area" class="chat-box__input"
                     contenteditable
                     v-html="dText"
                     @tribute-replaced="tributeReplaced"
                ></div>
            </vue-tribute>
        </div>

        <p>当前选中人员：</p>
        <json-viewer
                :value="currSelectRy"
                :expand-depth=5
                copyable
                boxed
                sort></json-viewer>

        <p>所有选中人员：</p>
        <json-viewer
                :value="atRyList"
                :expand-depth=5
                copyable
                boxed
                sort></json-viewer>
    </div>
</template>

<script>
    import VueTribute from "./tribute/vueTribute";
    import $ from 'jquery'

    export default {
        name: 'HelloWorld',
        components: {
            VueTribute
        },
        props: {
            msg: String
        },
        data(){
            return {
                tributeOption: { // 输入框@配置项
                    trigger: "@",
                    values: [
                        // {key: "Collin Henderson", value: "syropian"} // 必须是key， value的形式
                    ],
                    positionMenu: true,
                    menuContainer: document.querySelector('#chat-area')
                },
                dText: '', // 聊天窗html内容
                currSelectRy: {}, // 当前选中的人员信息
                atRyList: [], // 所有选中的
                selectOption: [{ // 人员数据
                    key: '小李子',
                    value: '小李子',
                    rydwdm: '1500000', // 人员单位代码
                    ryid: '123456',  // 人员id
                    xm: '小李子'  // 人员姓名
                }, { // 人员数据
                    key: '王二小',
                    value: '王二小',
                    rydwdm: '1500000', // 人员单位代码
                    ryid: '123456789',  // 人员id
                    xm: '王二小'  // 人员姓名
                }, { // 人员数据
                    key: '张三',
                    value: '张三',
                    rydwdm: '1500000', // 人员单位代码
                    ryid: '1234567890111',  // 人员id
                    xm: '张三'  // 人员姓名
                }],
                keyDownEventListener: null
            }
        },
        mounted() {
            // selectOption 可以是从接口获取的人员数据
            this.$set(this.tributeOption, 'values', this.selectOption);
            // 注册键盘监听事件
            this.$nextTick(function () {
                this.listenerKeyDown();
            });
        },
        destroyed() {
            // 移除监听事件
            $('#chat-area').off('keydown', this.keyDownEventListener);
            this.keyDownEventListener = null;
        },
        methods: {
            /**
             * @desc @选中后的回调
             */
            tributeReplaced(e) {
                // e.detail.item.original 当前选中的人员对象
                if (e.detail && e.detail.item && e.detail.item.original) {
                    this.currSelectRy = e.detail.item.original;
                    this.atRyList.push(this.currSelectRy);
                }
            },
            /**
             * @desc 监听@输入事件
             */
            listenerKeyDown() {
                let that = this;
                this.keyDownEventListener = $('#chat-area').on('keydown', function (e) {
                    // 重写backspace, 1、删除文字时，不能删除前面的空标签。2、标签可以直接删除。
                    if (e.keyCode === 8) {
                        let selection = window.getSelection();

                        // 如果光标当前位置是@区域，移除当前@所属dom
                        if (selection.anchorNode.parentNode.className == 'tribute-mention') {
                            let curr_node = selection.anchorNode.parentNode;
                            // 获取当前元素在父元素的位置
                            let child = selection.anchorNode.parentNode;
                            let i = 0; // 当前dom在父节点中的位置
                            let index = 0; // 在@人员列表中的位置

                            while ((child = child.previousSibling) != null) i++;

                            index = i && i - 2 >= 0 ? i - 2 : 0;
                            // 从dom中移除
                            curr_node.remove();
                            // 人员列表中数据移除
                            that.atRyList.splice(index, 1);
                            that.currSelectRy = {};
                        }
                    }

                });
            },
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .chat-wrapper {
        position: relative;
        border: 3px solid #66b1ff;
    }

    .chat-box__input {
        text-align: left;
        height: 130px;
        overflow: auto;
        color: #333333;
    }

    .tribute-container {
        position: absolute;
        top: 0;
        left: 0;
        height: auto;
        max-height: 300px;
        max-width: 500px;
        overflow: auto;
        display: block;
        z-index: 999999;
        border-radius: 4px;
        box-shadow: 0 1px 4px rgba(#000, 0.13);
    }

    ul {
        padding: 10px;
        background-color: #fff;
    }

    li {
        list-style: none;
        line-height: 36px;
        margin: 0;
        font-size: 14px;
        color: #606266;
        cursor: pointer;
        outline: none;
    }

    li.highlight,
    li:hover {
        background-color: #ecf5ff;
        color: #66b1ff;
    }

    /deep/.tribute-mention {
        display: inline-block;
        padding: 1px 5px;
        background-color: rgba(200, 221, 251, 0.45);
        color: #4090ff;
    }
</style>
